<template>
  <view class="play-box">
    <view class="play-tab">
      <view class="play-tab-img">
        <image src="../static/captcha.png" mode="" />
      </view>
      <view class="play-tab-name">
        <view>纪念</view>-
        <view>谢昊阳</view>
      </view>
      <view class="play-icon iconfont icon-bofang" v-if="true"></view>
      <view class="play-icon iconfont icon-Pause" v-else></view>
    </view>
  </view>
</template>

<script>
import { songDetail } from "@/api";
export default {
  props: ["curId"],
  methods: {
    async getsongDetail(curId) {
      let data = songDetail(curId);
      console.log("这个是song的详情", data);
    },
  },

  onLoad(params) {
    this.getsongDetail(curId);
  },
};
</script>

<style lang="less" scoped>
page {
  width: 100%;
}
.play-box {
  width: 100%;
  height: 200rpx;
  margin-bottom: 150rpx;
  background-color: #f8f9fd;
  .play-tab {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .play-tab-img {
      width: 100rpx;
      height: 100rpx;
      overflow: hidden;
      margin-left: 20rpx;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .play-tab-name {
      display: flex;
      justify-content: center;
      align-items: center;
      & > view:nth-child(1) {
        margin: 0 10rpx;
        font-size: 36rpx;
      }
      & > view:nth-child(2) {
        color: #a7a8ad;
        margin: 0 10rpx;
        font-size: 36rpx;
      }
    }
    .play-icon {
      margin-left: auto;
      color: #41465c;
      font-size: 52rpx;
      margin-right: 40rpx;
    }
  }
}
</style>